<template>
  <div class="energy-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <div class="title-box">指标分析</div>
      <section class="top-main">
        <div class="energy-conservation">
          <div class="title-little-box">分析趋势</div>
        </div>
        <div class="equipment-operation">
          <div class="title-little-box">指标报表</div>
        </div>
      </section>

      <section class="center-main">
        <div class="energy-analysis panel1">
          <div class="inner1">
            <div class="bottom-echart">
              <div class="charts-content">
                <Vechart class="option" :options="options2Data"></Vechart>
              </div>
            </div>
          </div>
        </div>
        <div class="report-table panel1">
          <div class="inner1">
            <div class="table-option">
              <div class="table-data-box">
                <el-table
                  class="main2-table"
                  :data="showTableList"
                  :cell-style="{
                    height: '50px',
                    color: '#84BFDD',
                    textAlign: 'center',
                  }"
                  :header-cell-style="{
                    background: '#102C44',
                    color: '#fff',
                    textAlign: 'center',
                    fontSize: '0.08rem',
                    heihgt: '50px',
                  }"
                  height="100%"
                >
                  <template slot="empty">
                    <p class="empty_text"></p>
                  </template>
                  <el-table-column
                    :prop="item.tag"
                    :label="item.name"
                    v-for="item in showTableTitles"
                    :key="item.tag"
                    :width="showTableTitles.length > 10 ? '124px' : 'auto'"
                  >
                    <template slot="header">
                      <div style="cursor: pointer">
                        {{ item.name }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="bottom-main">
        <div class="option-check">
          <span class="time_text">指标类别</span>

          <el-select
            :value="uid"
            @change="dateChange"
            placeholder="请选择"
            class="select-title-option"
          >
            <el-option
              v-for="item in showSelectData"
              :key="item.uid"
              :label="item.name"
              :value="item.uid"
            ></el-option>
          </el-select>
        </div>
        <div class="time-line">
          <el-button
            v-for="(item, index) in yearList"
            :key="index"
            class="date-item"
            :class="{ 'current-time': year == item }"
            @click="yearQuery(item)"
          >
            {{ item }}年
          </el-button>
        </div>
        <div class="confirm_btn query" @click="confirmQuery">查询</div>
        <div class="confirm_btn export" @click="confirmExport">导出</div>
      </section>
    </div>
  </div>
</template>
<script>
import Vechart from "../../components/charts/Vcharts";

import options1 from "./echartsjson/options1.json";
import { yearArray } from "../../utils/index.js";
export default {
  name: "Indexanalysis",
  props: [
    "selectData",
    "tableList",
    "tableTitles",
    "optionsData",
    "valueIndex",
  ],
  components: {
    Vechart,
  },
  data() {
    return {
      options1: options1,
      colors: [
        "#EE6B86",
        "#E99114",
        "#E9EA8B",
        "#29DAD1",
        "#1CA7E9",
        "#545CBE",
      ],
      yearList: yearArray(),
      year: new Date().getFullYear() + "",
    };
  },

  methods: {
    dateChange(v) {
      this.$emit("Selectindex", v);
    },
    yearQuery(year) {
      this.year = year;
      this.$emit("Checkyear", year);
    },
    // 查询
    confirmQuery() {
      this.$emit("ConfirmQuery");
    },
    //导出
    confirmExport() {
      this.$emit("ConfirmExport");
    },
  },
  computed: {
    uid() {
      if (this.valueIndex) {
        return this.valueIndex;
      }
    },
    showSelectData() {
      if (this.selectData.length) {
        return this.selectData;
      }
    },
    showTableList() {
      if (this.tableList.length) {
        return this.tableList;
      }
    },
    showTableTitles() {
      if (this.tableTitles.length) {
        return this.tableTitles;
      }
    },
    options2Data() {
      // return this.options1;
      let datas = this.optionsData;
      if (Object.keys(datas).length && datas.enames.length) {
        let { enames, values } = datas;
        let color = this.colors.slice(0, enames.length + 1);
        let series = [];
        for (let i = 0; i < enames.length; i++) {
          series.push({
            name: enames[i],
            type: "bar",
            smooth: true,
            data: values[i],
          });
        }
        return {
          ...this.options1,
          color,
          legend: {
            ...this.options1.legend,
            data: enames,
          },
          xAxis: [
            {
              ...this.options1.xAxis[0],
              axisLabel: {
                ...this.options1.xAxis[0].axisLabel,
                // formatter: function(params, index) {
                //   return params.slice(5, 10);
                // }
              },
              data: datas.time || "暂无数据！",
            },
          ],
          yAxis: [
            {
              ...this.options1.yAxis[0],
              name: "耗电量(kWh)",
            },
          ],
          series,
        };
      } else {
        return this.options1;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.energy-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    .title-box {
      position: absolute;
      font-weight: bold;
      top: 10px;
      left: 0;
      font-size: 22px;
      color: #ffffff;
      text-align: center;
      width: 220px;
      height: 44px;
      line-height: 44px;
      background: url("../../assets/img/ti.png") no-repeat center;
      background-size: cover;
    }
    .top-main {
      width: 100%;
      height: 10%;
      display: flex;
      .energy-conservation {
        padding-left: 10%;
        width: 50%;
        height: 100%;
      }
      .equipment-operation {
        padding-left: 10%;
        width: 50%;
        height: 100%;
      }
    }
    .center-main {
      width: 100%;
      height: 80%;
      display: flex;
      justify-content: space-around;
      //   background-color: #fff;
      .energy-analysis {
        width: 59%;
        height: 100%;
        // background-color: #84bfdd;
        font-size: 20px;
        color: #fff;
        .bottom-echart {
          width: 100%;
          height: 100%;

          .tab-box {
            height: 15%;
            width: 100%;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            .month-tab {
              cursor: pointer;
              width: 90px;
              height: 40px;
              line-height: 28px;
              display: inline-block;
              border: 1px solid #59abdb;
              line-height: 40px;
              color: #a7d8cd;
            }
            .border-lr-none {
              border-left: none;
              border-right: none;
            }
            .select-current {
              background: #1a83d1;
              color: #fff;
            }
          }
          .charts-content {
            margin-top: 2%;
            height: 98%;
            width: 100%;
          }
        }
      }
      .report-table {
        width: 39%;
        height: 100%;
        color: #fff;
        font-size: 20px;
        .table-option {
          background-color: #fff;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .table-data-box {
            width: 100%;
            height: 100%;
            .main2-table {
              background-color: #050f23 !important;
            }
            /deep/.el-table tr {
              background-color: #050f23 !important;
            }
            /deep/.el-table__row.statistics-warning-row {
              background: #071635 !important;
            }
            /deep/.el-table__row.normal-now {
              background: #050f23 !important;
            }
          }
        }
      }
    }
    .bottom-main {
      width: 100%;
      height: 10%;
      position: relative;
      .option-check {
        width: 340px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        position: absolute;
        cursor: pointer;
        top: 50%;
        transform: translateY(-50%);
        left: 12%;
        .time_text {
          width: 100px;
          height: 40px;
          text-align: center;
          margin: 0 5px;
          font-size: 18px;
          color: #ffff;
          line-height: 40px;
        }

        .select-title-option {
          width: 220px;
          height: 40px;
          background: #091c37;
          border: none;
        }

        /deep/.el-popper .popper__arrow::after {
          border-top-color: #091c37;
        }
      }
      .confirm_btn {
        position: absolute;
        cursor: pointer;
        top: 50%;

        width: 120px;
        height: 44px;
        transform: translateY(-50%);
        background: #091c37;
        border-radius: 6px;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
        font-weight: bold;
        color: #28c2ff;
        border: 1px solid #0a73b1;
      }
      .query {
        right: 24%;
      }

      .export {
        right: 16%;
      }
      .time-line {
        width: 50%;
        margin: 0 auto;
        cursor: pointer;
        height: 100%;
        background: url("../../assets/img/timeline.png") no-repeat center center;
        background-size: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        .date-item {
          // width: 1rem;
          height: 44px;
          margin: 0 20px;
          text-align: center;
          background: #091c37;
          border: 1px solid #0a73b1;
          font-size: 16px;
          color: #28c2ff;
          border-radius: 6px;
          // line-height: 44px;
        }
        .current-time {
          background: #2b70b2;
          color: #fff;
          border: 2px solid #2b70b2;
        }
      }
    }
    .title-little-box {
      width: 680px;
      font-size: 28px;
    }
  }
}
</style>
